<template>
  <div class="dashboard-container">


    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div style="border-radius: 20px;border: 1px solid;width: 90%;height: 300px;margin: 25px;" >
          <div style="height: 30px; text-align: center;font-size: 30px;line-height: 35px;">
            今日天气情况:
          </div>
          <div>
            <el-row style="height: 250px;font-size: 40px;">
              <el-col :span="12">
                <div style="height: 200px;text-align: center;margin-top: 80px;" >
                  朗晴
                </div>
              </el-col>
              <el-col :span="12">
                  <div style="height: 100px;margin-top: 25px;">
                    最高温：19度
                  </div>
                  <div style="height: 100px;margin-top: 25px;">
                    最低温：12度
                  </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div style="border-radius: 20px;border: 1px solid;width: 90%;height: 300px;margin: 25px;" >
          <div style="height: 30px; text-align: center;font-size: 30px;line-height: 35px;">
            温湿度情况
          </div>
          <div>
            <el-row style="height: 250px;font-size: 35px;">
              <el-col :span="12">
                <div style="height: 200px;text-align: center;margin-top: 80px;" >
                  室内温度：23度
                </div>
              </el-col>
              <el-col :span="12">
                <div style="height: 200px;text-align: center;margin-top: 80px;" >
                  室内湿度：45%
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div style="border-radius: 20px;border: 1px solid;width: 90%;height: 300px;margin: 25px;" >
          <div style="height: 30px; text-align: center;font-size: 30px;line-height: 35px;">
            功耗情况
          </div>
          <div>
            <el-row style="height: 250px;font-size: 35px;">
              <el-col :span="12">
                <div style="height: 200px;text-align: center;margin-top: 80px;" >
                  当前功耗：180w
                </div>
              </el-col>
              <el-col :span="12">
                <div style="height: 200px;text-align: center;margin-top: 80px;" >
                  总功耗：120w
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="background-color:white;padding:16px 16px 0;margin:32px;border: 1px solid;border-radius: 20px">
      <line-chart />
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BarChart from '@/components/Charts/BarChart.vue';
import LineChart from '@/components/Charts/LineChart.vue';
import RaddarChart from '@/components/Charts/RaddarChart.vue';
import PieChart from '@/components/Charts/PieChart.vue';


export default {
  name: 'Dashboard',
  components: {
    LineChart,
    BarChart,
    RaddarChart,
    PieChart
  },
  data() {
    return {
    
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>../../components/Charts/BarChart.vue../../components/Charts/LineChart.vue../../components/Charts/PieChart.vue../../components/Charts/RaddarChart.vue
